<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>音乐推荐系统 - 用户登录</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link rel="Shortcut Icon" href="/static/player/images/icon.png">
    <style>
        html, body {
            height: 100%;
        }
        body {
            display: flex;
            align-items: center;
            background-color: #f5f5f5;
            padding-top: 40px;
            padding-bottom: 40px;
        }
        .login-container {
            width: 100%;
            max-width: 1200px;
            padding: 15px;
            margin: auto;
        }
        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }
        .form-signin .checkbox {
            font-weight: 400;
        }
        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }
        .form-signin .form-control:focus {
            z-index: 2;
        }
        .form-signin input[type="text"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .system-intro {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            padding: 20px;
        }
        .feature-icon {
            font-size: 2rem;
            color: #007bff;
            margin-bottom: 10px;
        }
    </style>
</head>
<body class="text-center">
<div class="login-container">
    <div class="row">
        <!-- 系统介绍部分 -->
        <div class="col-md-8 system-intro text-left">
            <h2 class="text-center mb-4">音乐推荐系统</h2>
            <div class="row mb-4">
                <div class="col-md-6">
                    <h4><span class="feature-icon">🎵</span> 个性化推荐</h4>
                    <p>基于您的音乐喜好，智能分析并提供个性化音乐推荐，发现更多您可能喜欢的音乐。</p>
                </div>
                <div class="col-md-6">
                    <h4><span class="feature-icon">🎧</span> 多样化分类</h4>
                    <p>按照流派、语言等多维度对音乐进行分类，轻松找到符合您口味的音乐。</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h4><span class="feature-icon">👍</span> 喜好标记</h4>
                    <p>标记您喜欢或不喜欢的音乐，系统将不断学习您的偏好，提供更精准的推荐。</p>
                </div>
                <div class="col-md-6">
                    <h4><span class="feature-icon">🎼</span> 便捷播放</h4>
                    <p>在线播放您喜爱的音乐，随时随地享受音乐的美妙。</p>
                </div>
            </div>
            <div class="text-center mt-4">
                <p class="text-muted">登录后即可体验全部功能，开启您的音乐探索之旅！</p>
            </div>
        </div>
        
        <!-- 登录表单部分 -->
        <div class="col-md-4">
            <form method="post" class="form-signin">
                {% csrf_token %}
                
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }}" role="alert">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
                
                <img class="mb-4" src="/static/player/images/icon.png" alt="" width="72" height="72">
                <h1 class="h3 mb-3 font-weight-normal">用户登录</h1>
                <label for="inputUserName" class="sr-only">用户名</label>
                <input type="text" id="inputUserName" class="form-control" placeholder="用户名" name="username" required autofocus>
                <label for="inputPassword" class="sr-only">密码</label>
                <input type="password" id="inputPassword" class="form-control" placeholder="密码" name="password" required>
                
                <!-- 验证码部分 -->
                <div class="form-group mb-3">
                    <label for="inputCaptcha" class="sr-only">验证码</label>
                    <div class="input-group">
                        <input type="text" id="inputCaptcha" class="form-control" placeholder="验证码" name="captcha" required>
                        <div class="input-group-append">
                            <img src="/captcha_image" alt="验证码" id="captchaImage" style="height: 38px; cursor: pointer;" onclick="refreshCaptcha()">
                        </div>
                    </div>
                    <small class="form-text text-muted text-left">点击图片可刷新验证码</small>
                </div>
                
                <div class="checkbox mb-3 text-left">
                    <label>
                        <input type="checkbox" value="remember-me"> 记住登录状态
                    </label>
                </div>
                <button class="btn btn-lg btn-primary btn-block" type="submit">立即登录</button>
                <p class="mt-3 text-left">还没有账号？<a href="sign_up">立即注册</a></p>
                <p class="mt-5 mb-3 text-muted" style="font-size: x-small">Copyright (C). create by BHML 2024, All Rights Reserved.</p>
            </form>
        </div>
    </div>
</div>

<script>
function refreshCaptcha() {
    // 给验证码图片URL添加时间戳参数，避免浏览器缓存
    document.getElementById('captchaImage').src = '/captcha_image?' + new Date().getTime();
}
</script>
</body>
</html>
